import React, { useEffect, useRef, useState } from 'react';
import { connect } from 'umi';
import { Alert, Button, Space, Tag, notification, Row, Col, } from 'antd'
import PopImgShow from '@/components/PopImgShow';
import TableDataBlock from '@/components/TableDataBlock';
import { promoter_customer_status } from '@/common/contact'
import { uploadFile } from '@/utils/utils';
const promoterCheckList = (props) => {
    const { loading, dispatch, list } = props;
    const childRef = useRef();
    const [visible, setVisible] = useState(false);
    const [checkVisible, setCheckVisible] = useState(false)
    const [params, setParams] = useState({})
    const [selectedRow, setSelectedRow] = useState({
        selectedRowKeys: [],
        type: 'checked',
        preserveSelectedRowKeys: true,
        getCheckboxProps: (record) => {
            const { status } = record
            return {
                disabled: status !== '0',
                // Column configuration not to be checked
                id: record.id,
            };
        },
        onChange: (val, selectedRows) => {
            setSelectedRow({
                ...selectedRow,
                selectedRowKeys: val,
            });
        },
    });
    const fakeExportPromoter = () => {
        dispatch({
            type: 'promoter/fakeExportPromoterUser',
            payload: {
                ...params
            },
            callback: (e) => {
                const { url } = e
                uploadFile(url)
            }
        })

    }
    const searchItems = [
        {
            label: '订单号',
            name: 'orderSn',
        },
        {
            label: '用户姓名',
            name: 'keyword',
        },
        {
            label: '状态',
            name: 'status',
            type: 'select',
            select: promoter_customer_status,
        },
    ];

    // table 表头
    const getColumns = [
        {
            title: '头像/昵称',
            width: 180,
            dataIndex: 'profile',
            render: (e, record) => {
                const { username } = record
                return <Space>
                    <PopImgShow url={e}></PopImgShow>
                    {username}
                </Space>
            }
        },
        {
            title: '推广员姓名',
            dataIndex: 'promoterName',
        },
        {
            title: '状态最后变更时间',

            dataIndex: 'updateTime',
        },
        {
            title: '已结算订单金额',

            dataIndex: 'saleMoney',
        },
        {
            title: '已结算订单数',

            dataIndex: 'saleOrderAmount',
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: (e) => {
                return promoter_customer_status[e]
            }
        },

    ];
    const handleCallback = () => {
        childRef.current.fetchGetData();

    };

    return (
        <Row gutter={[24, 24]}>
            <Col span={24}>
                <Button type='primary' onClick={() => {
                    fakeExportPromoter();
                }}>导出</Button>
            </Col>
            <Col span={24}>
                <TableDataBlock
                    searchCallback={(e) => setParams(e)}
                    cRef={childRef}
                    loading={loading}
                    searchItems={searchItems}
                    columns={getColumns}
                    rowKey={(record) => `${record.id}`}
                    dispatchType="promoter/fetchListPromoterUser"
                    {...list}
                ></TableDataBlock>
            </Col>

        </Row>
    );
};

export default connect(({ promoter, loading }) => ({
    list: promoter.promoterUserRelationLogList,
    loading: loading.models.promoter,
}))(promoterCheckList);
